import { Breadcrumb, Divider, Dropdown, List, Skeleton } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import AddModal from './AddModal';
import styles from './index.module.less';
import { MENU_LIST_TYPE } from './index';
import { CustomIcon, Title } from '../../components';
import AddModalFolder from './AddModalFolder';
// import { ReactExcel } from '../../components';
type HOME_UI_TYPE = {
    menuList: MENU_LIST_TYPE[];
    filterList: MENU_LIST_TYPE[];
    dataSource: any[];
    changeIcons: Function;
    selectedKeys: string[];
    setSelectedKeys: Function;
    loadMoreData: () => void;
    items: any[];
    addModalTitle: string;
    isAddOpen: boolean;
    setIsAddOpen: (open: boolean) => void;
    addIsFolderOpen: boolean;
    onCancel: (data: any) => void;
    onOk: (data: any) => void;
}

const HomeUI = ({
    menuList,
    filterList,
    dataSource,
    changeIcons,
    selectedKeys,
    setSelectedKeys,
    loadMoreData,
    items,
    addModalTitle,
    isAddOpen,
    setIsAddOpen,
    addIsFolderOpen,
    onCancel,
    onOk
}: HOME_UI_TYPE) => {
    return <div className={styles.createTitleBox}>
        {/* <ReactExcel/> */}
        <Breadcrumb className={styles.breadBox}>
            <Breadcrumb.Item><Title title={'开始'} level={5} /></Breadcrumb.Item>
        </Breadcrumb>
        <div className={styles.menuListBox}>
            {
                menuList.map((item: MENU_LIST_TYPE) => {
                    const { items } = item;
                    return <Dropdown key={item.name} menu={{ items }} disabled={item.disabled}>
                        <div onClick={() => item.command && item.command()} key={item.name} className={styles.menuListItem}>
                            <div className={styles.menuListItemContent}>
                                <div className={styles.iconStyle}> {item.prefix} </div>
                                <div>
                                    <div className={styles.menuListItemName}>{item.name}</div>
                                    <div className={styles.menuListItemContentText}>{item.contentText}</div>
                                </div>
                            </div>
                            &emsp;
                            <div className={styles.iconStyle}> {item.suffix} </div>
                        </div>
                    </Dropdown>
                })
            }
        </div>

        <Title title={'文档记录'} level={5} />
        <div className={styles.filterBox}>
            {filterList.map((item) => {
                const { items, name } = item;
                return <Dropdown key={name} menu={{ items, selectedKeys, onClick: (e: any) => { setSelectedKeys([e.key]) } }} trigger={['click']}>
                    <div className={styles.more}>
                        {name} <CustomIcon str='arrow-down-s-line' />
                    </div>
                </Dropdown>
            })}
        </div>
        <div id="scrollableDiv" className={styles.scrollableDiv}>
            <InfiniteScroll
                dataLength={dataSource.length}
                next={loadMoreData}
                hasMore={dataSource.length < 50}// 小于50条，就加载更多
                loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
                scrollableTarget="scrollableDiv">
                <List
                    dataSource={dataSource}
                    renderItem={(item) => (
                        <List.Item className={styles.listItem} key={item.email}>
                            <div className={styles.titleBox}>
                                <span className={styles.titleIcon}>{changeIcons('excel')}</span>
                                <span className={styles.titleText}>无标题文档</span>
                            </div>

                            <div className={styles.ascription}>归属</div>
                            <div className={styles.time}>2024/01/01</div>
                            <Dropdown menu={{ items }} trigger={['click']}>
                                <div className={styles.more}>
                                    <CustomIcon str='more-fill' />
                                </div>
                            </Dropdown>

                        </List.Item>
                    )}
                />
            </InfiniteScroll>
        </div>
        <AddModal title={addModalTitle} isAddOpen={isAddOpen} setIsAddOpen={setIsAddOpen} />
        <AddModalFolder addIsFolderOpen={addIsFolderOpen}
            onCancel={onCancel} onOk={onOk} />
    </div>;
};

export default HomeUI;